<template>
  <div class="profile">
    <!-- 顶部标题 -->
    <header class="page-header">
      <div class="header-content">
        <button @click="goBack" class="back-button">
          <i class="fas fa-arrow-left"></i>
        </button>
        <h1 class="page-title">我的</h1>
        <button @click="showSettings = !showSettings" class="settings-button">
          <i class="fas fa-cog"></i>
        </button>
      </div>
    </header>

    <!-- 用户信息卡片 -->
    <div class="user-card">
      <div class="user-avatar-section">
        <div class="avatar-container" @click="showAvatarModal = true">
          <img :src="userInfo.avatar" :alt="userInfo.name" class="user-avatar">
          <div class="avatar-overlay">
            <i class="fas fa-camera"></i>
          </div>
        </div>
        <div class="user-info">
          <h2 class="user-name">{{ userInfo.name }}</h2>
          <p class="user-phone">{{ userInfo.phone }}</p>
          <div class="user-level">
            <i class="fas fa-crown"></i>
            <span>{{ userInfo.level }}</span>
          </div>
        </div>
      </div>
      
      <div class="user-stats">
        <div class="stat-item" @click="goToPage('/client/points')">
          <div class="stat-value">{{ userInfo.points }}</div>
          <div class="stat-label">积分</div>
        </div>
        <div class="stat-item" @click="goToPage('/client/cases')">
          <div class="stat-value">{{ userInfo.casesCount }}</div>
          <div class="stat-label">案件</div>
        </div>
        <div class="stat-item" @click="goToPage('/client/appointments')">
          <div class="stat-value">{{ userInfo.appointmentsCount }}</div>
          <div class="stat-label">预约</div>
        </div>
      </div>
    </div>

    <!-- 功能菜单 -->
    <div class="menu-sections">
      <!-- 我的服务 -->
      <div class="menu-section">
        <h3 class="section-title">我的服务</h3>
        <div class="menu-items">
          <div class="menu-item" @click="goToPage('/client/case-documents')">
            <div class="menu-icon blue">
              <i class="fas fa-file-alt"></i>
            </div>
            <div class="menu-content">
              <div class="menu-title">案件文档</div>
              <div class="menu-subtitle">查看和下载文档</div>
            </div>
            <div class="menu-badge" v-if="pendingDocuments > 0">{{ pendingDocuments }}</div>
            <i class="fas fa-chevron-right menu-arrow"></i>
          </div>
          
          <div class="menu-item" @click="goToPage('/client/case-timeline')">
            <div class="menu-icon green">
              <i class="fas fa-timeline"></i>
            </div>
            <div class="menu-content">
              <div class="menu-title">案件进度</div>
              <div class="menu-subtitle">跟踪案件处理进展</div>
            </div>
            <i class="fas fa-chevron-right menu-arrow"></i>
          </div>
          
          <div class="menu-item" @click="goToPage('/client/notifications')">
            <div class="menu-icon orange">
              <i class="fas fa-bell"></i>
            </div>
            <div class="menu-content">
              <div class="menu-title">消息通知</div>
              <div class="menu-subtitle">查看系统消息和提醒</div>
            </div>
            <div class="menu-badge" v-if="unreadNotifications > 0">{{ unreadNotifications }}</div>
            <i class="fas fa-chevron-right menu-arrow"></i>
          </div>
        </div>
      </div>

      <!-- 账户管理 -->
      <div class="menu-section">
        <h3 class="section-title">账户管理</h3>
        <div class="menu-items">
          <div class="menu-item" @click="showPersonalInfo = true">
            <div class="menu-icon purple">
              <i class="fas fa-user-edit"></i>
            </div>
            <div class="menu-content">
              <div class="menu-title">个人信息</div>
              <div class="menu-subtitle">编辑个人资料</div>
            </div>
            <i class="fas fa-chevron-right menu-arrow"></i>
          </div>
          
          <div class="menu-item" @click="showSecuritySettings = true">
            <div class="menu-icon red">
              <i class="fas fa-shield-alt"></i>
            </div>
            <div class="menu-content">
              <div class="menu-title">安全设置</div>
              <div class="menu-subtitle">密码和安全选项</div>
            </div>
            <i class="fas fa-chevron-right menu-arrow"></i>
          </div>
        </div>
      </div>

      <!-- 帮助与反馈 -->
      <div class="menu-section">
        <h3 class="section-title">帮助与反馈</h3>
        <div class="menu-items">
          <div class="menu-item" @click="goToPage('/client/help')">
            <div class="menu-icon indigo">
              <i class="fas fa-question-circle"></i>
            </div>
            <div class="menu-content">
              <div class="menu-title">帮助中心</div>
              <div class="menu-subtitle">常见问题解答</div>
            </div>
            <i class="fas fa-chevron-right menu-arrow"></i>
          </div>
          
          <div class="menu-item" @click="contactService">
            <div class="menu-icon yellow">
              <i class="fas fa-headset"></i>
            </div>
            <div class="menu-content">
              <div class="menu-title">联系客服</div>
              <div class="menu-subtitle">在线客服支持</div>
            </div>
            <i class="fas fa-chevron-right menu-arrow"></i>
          </div>
        </div>
      </div>
    </div>

    <!-- 退出登录按钮 -->
    <div class="logout-section">
      <button @click="logout" class="logout-button">
        <i class="fas fa-sign-out-alt"></i>
        退出登录
      </button>
    </div>

    <!-- 个人信息编辑弹窗 -->
    <div v-if="showPersonalInfo" class="modal" @click="showPersonalInfo = false">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>个人信息</h3>
          <button @click="showPersonalInfo = false" class="close-button">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label>姓名</label>
            <input v-model="editUserInfo.name" type="text" class="form-input">
          </div>
          <div class="form-group">
            <label>手机号</label>
            <input v-model="editUserInfo.phone" type="tel" class="form-input" disabled>
          </div>
          <div class="form-group">
            <label>邮箱</label>
            <input v-model="editUserInfo.email" type="email" class="form-input">
          </div>
        </div>
        <div class="modal-footer">
          <button @click="showPersonalInfo = false" class="cancel-button">取消</button>
          <button @click="savePersonalInfo" class="save-button">保存</button>
        </div>
      </div>
    </div>

    <!-- 安全设置弹窗 -->
    <div v-if="showSecuritySettings" class="modal" @click="showSecuritySettings = false">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>安全设置</h3>
          <button @click="showSecuritySettings = false" class="close-button">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="modal-body">
          <div class="security-item" @click="changePassword">
            <div class="security-icon">
              <i class="fas fa-key"></i>
            </div>
            <div class="security-content">
              <div class="security-title">修改密码</div>
              <div class="security-subtitle">定期更换密码保护账户安全</div>
            </div>
            <i class="fas fa-chevron-right"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'

export default {
  name: 'ClientProfile',
  setup() {
    const router = useRouter()
    const showSettings = ref(false)
    const showPersonalInfo = ref(false)
    const showSecuritySettings = ref(false)
    const showAvatarModal = ref(false)
    
    // 用户信息
    const userInfo = ref({
      name: '张三',
      phone: '138****8888',
      email: 'zhangsan@example.com',
      avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face',
      level: '银牌会员',
      points: 1280,
      casesCount: 3,
      appointmentsCount: 2
    })
    
    // 编辑用户信息
    const editUserInfo = ref({
      name: userInfo.value.name,
      phone: userInfo.value.phone,
      email: userInfo.value.email
    })
    
    // 统计数据
    const pendingDocuments = ref(2)
    const unreadNotifications = ref(5)
    
    // 跳转页面
    const goToPage = (path) => {
      router.push(path)
    }
    
    // 返回上一页
    const goBack = () => {
      router.go(-1)
    }
    
    // 保存个人信息
    const savePersonalInfo = () => {
      userInfo.value = { ...userInfo.value, ...editUserInfo.value }
      showPersonalInfo.value = false
      alert('个人信息保存成功！')
    }
    
    // 修改密码
    const changePassword = () => {
      alert('跳转到修改密码页面')
    }
    
    // 联系客服
    const contactService = () => {
      alert('正在为您转接客服...')
    }
    
    // 退出登录
    const logout = () => {
      if (confirm('确定要退出登录吗？')) {
        router.push('/login')
      }
    }
    
    return {
      showSettings,
      showPersonalInfo,
      showSecuritySettings,
      showAvatarModal,
      userInfo,
      editUserInfo,
      pendingDocuments,
      unreadNotifications,
      goToPage,
      goBack,
      savePersonalInfo,
      changePassword,
      contactService,
      logout
    }
  }
}
</script>

<style scoped>
.profile {
  min-height: 100vh;
  background: #f8f9fa;
}

/* 页面头部 */
.page-header {
  background: white;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
}

.back-button, .settings-button {
  background: none;
  border: none;
  font-size: 18px;
  color: #374151;
  cursor: pointer;
  padding: 8px;
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

/* 用户信息卡片 */
.user-card {
  background: linear-gradient(135deg, #667eea, #764ba2);
  margin: 20px;
  border-radius: 16px;
  padding: 24px;
  color: white;
}

.user-avatar-section {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.avatar-container {
  position: relative;
  margin-right: 16px;
  cursor: pointer;
}

.user-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.3);
}

.avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.avatar-container:hover .avatar-overlay {
  opacity: 1;
}

.user-name {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 4px 0;
}

.user-phone {
  font-size: 14px;
  opacity: 0.8;
  margin: 0 0 8px 0;
}

.user-level {
  display: flex;
  align-items: center;
  font-size: 12px;
  opacity: 0.9;
}

.user-level i {
  margin-right: 4px;
  color: #fbbf24;
}

.user-stats {
  display: flex;
  justify-content: space-around;
}

.stat-item {
  text-align: center;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.stat-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.stat-value {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  opacity: 0.8;
}

/* 功能菜单 */
.menu-sections {
  padding: 0 20px 20px;
}

.menu-section {
  margin-bottom: 24px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  margin: 0 0 12px 0;
  padding-left: 4px;
}

.menu-items {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item:hover {
  background: #f9fafb;
}

.menu-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}

.menu-icon.blue {
  background: #dbeafe;
  color: #1d4ed8;
}

.menu-icon.green {
  background: #dcfce7;
  color: #16a34a;
}

.menu-icon.orange {
  background: #fed7aa;
  color: #ea580c;
}

.menu-icon.purple {
  background: #f3e8ff;
  color: #7c3aed;
}

.menu-icon.red {
  background: #fee2e2;
  color: #dc2626;
}

.menu-icon.indigo {
  background: #e0e7ff;
  color: #4f46e5;
}

.menu-icon.yellow {
  background: #fef3c7;
  color: #d97706;
}

.menu-content {
  flex: 1;
}

.menu-title {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 2px;
}

.menu-subtitle {
  font-size: 12px;
  color: #6b7280;
}

.menu-badge {
  background: #ef4444;
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 600;
  margin-right: 8px;
}

.menu-arrow {
  color: #9ca3af;
  font-size: 14px;
}

/* 退出登录 */
.logout-section {
  padding: 0 20px 40px;
}

.logout-button {
  width: 100%;
  padding: 16px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  font-size: 16px;
  color: #dc2626;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.logout-button:hover {
  background: #fef2f2;
  border-color: #fecaca;
}

/* 弹窗样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal-content {
  background: white;
  border-radius: 16px;
  max-width: 500px;
  width: 100%;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 0;
}

.modal-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.close-button {
  background: none;
  border: none;
  font-size: 18px;
  color: #9ca3af;
  cursor: pointer;
  padding: 8px;
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 24px;
  border-top: 1px solid #f3f4f6;
}

/* 表单样式 */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
}

.form-input {
  width: 100%;
  padding: 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.2s ease;
}

.form-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.cancel-button,
.save-button {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.cancel-button {
  background: #f3f4f6;
  border: none;
  color: #6b7280;
}

.save-button {
  background: #3b82f6;
  border: none;
  color: white;
}

/* 安全设置 */
.security-item {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
}

.security-item:last-child {
  border-bottom: none;
}

.security-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  color: #6b7280;
}

.security-content {
  flex: 1;
}

.security-title {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 2px;
}

.security-subtitle {
  font-size: 12px;
  color: #6b7280;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .user-card {
    margin: 16px;
    padding: 20px;
  }
  
  .menu-sections {
    padding: 0 16px 20px;
  }
  
  .logout-section {
    padding: 0 16px 40px;
  }
  
  .user-avatar-section {
    flex-direction: column;
    text-align: center;
  }
  
  .avatar-container {
    margin-right: 0;
    margin-bottom: 16px;
  }
}
</style> 